import React, { useState } from 'react';
import styles from './Form.less';
import { history, Link } from 'umi'
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { GoldTwoTone, LeftCircleTwoTone } from '@ant-design/icons';
import { service_reg } from '@/services/login/login';
import { message } from 'antd';
import { useEffect } from 'react';

export default function Page() {
  const [code, setcode] = useState("")

  useEffect(() => {
    if (history.location.query?.web_code === undefined) {
      history.push("/user/login")
      message.error("Illegal invasion")

    }
    const web_code: any = history.location.query?.web_code
    setcode(web_code)
    return () => {

    }
  }, [])

  const doRegister = async (values: any) => {
    const res = await service_reg({ web_code: code, service_name: values.service_name })
    if (res.code === 200) {
      history.push("/user/login")
      message.success(res.message)
    } else {
      if (res.code === 3001) {
        history.push("/user/login")
      }
      message.info(res.message)
    }
  }
  return (
    <div className={styles.container}>
      <div className={styles.warp}>
        <ProForm
          onFinish={doRegister}
          submitter={{
            searchConfig: { submitText: "确定注册" },
            resetButtonProps: { hidden: true },
            render: (_, dom) => dom.pop(),
            submitButtonProps: { size: "large", style: { width: "100%" } }
          }}
        >
          <ProForm.Item>
            <ProFormText
              name="service_name"
              placeholder="服务商名称"
              fieldProps={{ size: "large", prefix: <GoldTwoTone /> }}
              rules={[
                { required: true, message: "请输入服务商名称" },
                { min: 3, message: "服务商名称长度最少3个字符" },
                { max: 30, message: "服务商名称长度最长30个字符" },
                { pattern: /^[\w\u4e00-\u9fa5]+$/, message: "服务商名称只能为数字、字母、中文" },
              ]}
            ></ProFormText>
          </ProForm.Item>
        </ProForm>
        <div className={styles.link}>
          <Link to="/user/login"><LeftCircleTwoTone /> 已有账号？去登陆</Link>
        </div>
      </div>
    </div>
  );
}
